<template>
	<view class="">
		<view>
			<view class="tabBox flex justify-around bg-white text-center">
				<scroll-view scroll-x="true" show-scrollbar="false" class="scroll_cont flex">
					<view class="tabs" v-for="(tabItem, tabIdx) of tabs" :key="tabItem.id" @click="tabChange(tabItem, tabIdx)">
						<text class="text h6 font-weight-bold" :class="{ active: tabIdx == current }">{{ tabItem.name }}</text>
						<text class="line">|</text>
					</view>
				</scroll-view>
			</view>
			<image v-if="image" class="top_img" :src="image" mode="aspectFill"></image>
		</view>
		<view class="cont_box p-2">
			<view class="label h4 font-weight-bold py-2">—— 上榜企业 ——</view>
			<view v-if="companyList.length <= 0" class="p-2 mt-3"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty></view>
			<view v-else>
				<!-- <company-list v-if="companyList.length >= 1" :list="companyList" check-types="qy"></company-list> -->
				<view class="cont_item p-3" v-for="(item, index) of companyList" :key="index" @click="toIndex(item.eid)">
					<view class="cont_top flex justify-between">
						<view class="flex" v-if="item.company">
							<view class="sort">
								<image class="sort_img" src="@/static/img2/home/sort.png" mode="aspectFit"></image>
								<text class="text-white font sort_num">{{ item.sort }}</text>
							</view>
							<image v-if="!item.company.company_logo" class="cont_img" src="/static/img2/home/empty_logo.jpg" mode="aspectFit"></image>
							<image v-else class="cont_img" :src="item.company.company_logo" mode="aspectFit"></image>
							<view class="">
								<view class="cont_t font-weight-bold h4">{{ item.company.company_name || '' }}</view>
								<view class="hot_num flex align-center font-sm">
									<view class="flex mr-2">
										<image src="/static/img2/nav1/hot_icon.png" mode=""></image>
										<text class="h6 font-weight-bold">{{ item.heat_val || 0 }}</text>
									</view>
									<text class="c_9 font_24 mr-1">展馆：{{ item.exhibition || '暂无' }}</text>
									<!-- <text class="c_9 font_24 mr-1">展位号：{{ item.zhanwei || '暂无' }}</text> -->
									<text class="c_9 font_24 mr-1">产品数量：{{ item.company_count || 0 }}</text>
								</view>
							</view>
						</view>
						<view class="cont_head_r flex">
							<view class="star text-center" @click.stop="collectionChange(item, index)">
								<image v-if="item.company.qiyeYsc <= 0" src="/static/img2/nav1/collection0.png" mode=""></image>
								<image v-else src="/static/img2/nav1/collection1.png" mode=""></image>
								<text class="c_9 font_24">{{ item.company.qiyeShouCang }}</text>
							</view>
							<view class="hand_good text-center" @click.stop="goodChange(item, index)">
								<image v-if="item.company.qiyeYdz <= 0" src="/static/img2/nav1/fabulous0.png" mode=""></image>
								<view v-else>
									<text v-if="item.company.addanimal" class="add1 h6 c_main font-weight-bolder">+1</text>
									<image src="/static/img2/nav1/fabulous1.png" mode=""></image>
								</view>
								<text class="c_9 font_24">{{ item.company.qiyeDianZan }}</text>
							</view>
						</view>
					</view>
					<view class="cont_bottom" v-if="item.company">
						<view class="my-2 font_24 c_9 text_hidden2 font_24_2"><text v-html="item.company.company_desc"></text></view>
						<view class="cont_bottom_img flex justify-between" v-if="item.company.gold_img1 || item.company.gold_img2 || item.company.gold_img3">
							<image :src="item.company.gold_img1" mode="scaleToFill"></image>
							<image :src="item.company.gold_img2" mode="aspectFill"></image>
							<image :src="item.company.gold_img3" mode="aspectFill"></image>
						</view>
					</view>
					<text class="to_home text-white h6" @click="toIndex(item.eid)">去主页</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getHeat } from '@/api/home/hot.js';
import { likecollectionDzsc } from '@/api/home/company.js';
import { banner } from '@/api/home/home.js';
// import companyList from '@/components/company_list.vue';
export default {
	// components: { companyList },
	data() {
		return {
			tabs: [],
			current: 0,
			companyList: [],
			image: ''
		};
	},
	onLoad() {
		this.getImage(8);
		this.getHotList(this.current + 1);
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		getImage(num) {
			// type:8制造 9服务 10协会
			banner({ type: num })
				.then(res => {
					// console.log(res);
					this.image = res.data[0].thumb;
				})
				.catch(err => {
					console.log('获取图片失败', err);
				});
		},
		tabChange(val, idx) {
			this.current = idx;
			this.getHotList(this.current + 1);
			switch (idx) {
				case 0:
					this.getImage(8);
					return;
				case 1:
					this.getImage(9);
					return;
				case 2:
					this.getImage(10);
					return;
			}
		},
		getHotList(val) {
			let msg = {
				uid: uni.getStorageSync('userInfo').userId || '',
				hid: val
			};
			getHeat(msg)
				.then(res => {
					if (res.code == 200) {
						// console.log(res.data);
						this.tabs = res.data.cate;
						this.companyList = res.data.list;
					} else {
						uni.$u.toast('获取热力榜失败');
					}
				})
				.catch(err => {
					console.log('获取热力榜失败', err);
				});
		},
		// 去主页
		toIndex(val) {
			// if (!uni.getStorageSync('userInfo').hasLogin) {
			// 	this.toLogin(); // 未登录
			// } else {
			uni.navigateTo({
				url: '/subPages/company_home/index?id=' + val
			});
			// }
		},
		// 收藏
		collectionChange(val, idx) {
			let isSc = val.company.qiyeYsc == 0 ? 1 : 2;
			this.dzscChange(1, isSc, val.eid, idx);
		},
		// 点赞
		goodChange(val, idx) {
			let isDz = val.company.qiyeYdz == 0 ? 1 : 2;
			this.dzscChange(2, isDz, val.eid, idx);
		},
		dzscChange(type, status, contId, index) {
			if (!uni.getStorageSync('userInfo').hasLogin) {
				this.toLogin(); // 未登录
			} else {
				let msg = {
					checktype: 2,
					type: type,
					status: status,
					company_product_id: contId,
					uid: uni.getStorageSync('userInfo').userId || ''
				};
				likecollectionDzsc(msg)
					.then(res => {
						if (res.code == 0) {
							uni.$u.toast(res.msg);
							let sc = parseInt(this.companyList[index].company.qiyeShouCang),
								dz = parseInt(this.companyList[index].company.qiyeDianZan);
							if (type == 1 || type == 3) {
								var add = sc + 1,
									minus = sc == 0 ? sc : sc - 1;
								this.$set(this.companyList[index].company, 'qiyeYsc', status == 1 ? 1 : 0);
								this.$set(this.companyList[index].company, 'qiyeShouCang', status == 1 ? add : minus);
							} else {
								var add = dz + 1,
									minus = dz - 1;
								this.$set(this.companyList[index].company, 'qiyeYdz', status == 1 ? 1 : 0);
								this.$set(this.companyList[index].company, 'qiyeDianZan', status == 1 ? add : minus);
								this.$set(this.companyList[index].company, 'addanimal', true);
							}
							this.$set(this.companyList[index], 'heat_val', res.heat_val.heat_val);
						} else {
							uni.$u.toast(res.msg);
						}
					})
					.catch(err => {
						console.log('点赞或收藏失败', err);
						uni.$u.toast('点赞或收藏失败');
					});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tabBox {
	margin: 0 auto;
	height: 70rpx;
	line-height: 70rpx;
	padding: 0 40rpx;
	.scroll_cont {
		white-space: nowrap;
		width: 100%;
	}
	.tabs {
		display: inline-block;
		.text {
			/*  #ifdef H5 */
			padding: 10rpx 0;
			/*  #endif  */
			/*  #ifdef MP-WEIXIN */
			padding: 6rpx 0;
			/*  #endif  */
		}
		.active {
			border-bottom: 4px solid $color14;
			color: $color14;
		}
		.line {
			margin: 40rpx;
		}
	}
	.tabs:last-child .line {
		display: none;
	}
}
.top_img {
	width: 100%;
	height: 240rpx;
	border-radius: 0px 0px 30rpx 30rpx;
}
.cont_box {
	.label {
		margin: 0 auto;
		text-align: center;
	}
	.cont_item {
		background-color: $color2;
		position: relative;
		padding-bottom: 60rpx;
		margin-bottom: 50rpx;
		border-radius: 15rpx;

		.cont_img {
			margin-right: 15rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			border: 1px solid #f2f2f2;
			position: relative;
		}
		.sort {
			position: absolute;
			top: 15rpx;
			left: 15rpx;
			z-index: 999;

			.sort_img {
				width: 48rpx;
				height: 49rpx;
				border-radius: 0;
			}
			.sort_num {
				position: absolute;
				top: 0;
				left: 15rpx;
			}
		}

		.hot_num {
			line-height: 42rpx;

			image {
				width: 21rpx;
				height: 26rpx;
				display: inline;
				margin-right: 5rpx;
				margin-top: 10rpx;
			}
		}
		.cont_head_r {
			image {
				width: 44rpx;
				height: 44rpx;
				border-radius: 0;
			}
			.star {
				margin-right: 15rpx;
			}
			.hand_good {
				position: relative;
				.add1 {
					position: absolute;
					top: 0rpx;
					left: 0;
					z-index: 999;
					opacity: 0;
					animation: mygood 3s linear 0s 1 normal running;
				}
				@keyframes mygood {
					0% {
						top: -10rpx;
						opacity: 0.5;
					}
					50% {
						top: -50rpx;
						opacity: 1;
					}
					100% {
						top: -60rpx;
						opacity: 0;
					}
				}
			}
		}

		.cont_bottom_img {
			image {
				width: 215rpx;
				height: 128rpx;
				border-radius: 15rpx;
			}
		}

		.to_home {
			background-color: $color14;
			border-radius: 15rpx;
			padding: 0rpx 30rpx;
			position: absolute;
			bottom: -27rpx;
			left: 50%;
			margin-left: -70rpx;
		}
	}
}
</style>
